<template>
  <div>
    <div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <q-card class="shadow-2">
          <q-card-section class="q-pa-sm">
            <div class="row items-center no-wrap">
              <div class="col">
                <q-chip class="no-border-radius" color="light-blue" text-color="white" size="10px" style="margin:0;">品类</q-chip>
                <q-chip square class="no-border-radius q-ml-none q-mr-none text-weight-bold">
                  <!-- <q-avatar class="no-border-radius" icon="business" color="light-blue" text-color="white"></q-avatar> -->
                  {{ baseInfoForm.code }}
                </q-chip>
              </div>
              <div class="col-auto">
                <q-btn outline label="返回" icon="" color="light-blue" :to="router.router"/>
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-section  class="q-pa-sm">
            <main-field :form="baseInfoForm" :field="fieldConfig"></main-field>
          </q-card-section>
        </q-card>
      </div>
      <div class="row q-col-gutter-x-md" style="margin-top:20px;">
        <left-navs v-bind:id= "id" :name= "baseInfoForm.name" v-on:change="item"  v-on:treeId= "rightId" class="col-lg-3 col-md-3 col-sm-12 col-xs-12"></left-navs>
        <right-navs v-on:update= "nums" v-bind:item="items"  v-bind:treeid= "data" v-bind:parentIds= "tabs"  class="col-lg-9 col-md-9 col-sm-12 col-xs-12"></right-navs>
      </div>
    </div>
  </div>
</template>

<script>
import MainField from 'src/pages/Common/SecondPackage/MainField/MainField'
import leftNavs from 'pages/Mdm/Categorytwo/CategoryPreview/leftNavs.vue'
import rightNavs from 'pages/Mdm/Categorytwo/CategoryPreview/rightNavs.vue'
export default {
  components: {
    leftNavs,
    rightNavs,
    MainField
  },
  data () {
    return {
      tabs: '',
      data: [],
      num: false,
      id: '',
      items: '',
      baseInfoForm: {
        code: '',
        name: '',
        createTime: '',
        createUserName: '',
        remark: '',
        lastUpdateTime: ''
      },
      fieldConfig: [
        {
          name: 'name',
          label: '名称'
        },
        {
          name: 'createUserName',
          label: '创建人'
        },
        {
          name: 'createTime',
          label: '创建时间'
        },
        {
          name: 'lastUpdateTime',
          label: '上次更新时间'
        },
        {
          name: 'remark',
          label: '说明',
          type: 'textarea'
        }
      ]
    }
  },
  watch: {
    id () {
      this.getItem()
    }
  },
  created () {
    this.id = this.$route.params.id
    console.log(this.$route.params.id)
    this.getItem()
    console.log(this.id)
  },
  computed: {
    router () {
      return this.$store.state.router
    }
  },
  methods: {
    rightId (data) {
      this.data = data
    },
    item (data) {
      this.items = data
    },
    nums (data) {
      this.num = data
    },
    async getItem () {
      if (this.id !== '') {
        let id = this.id
        await this.$api({
          method: 'get',
          url: `/mdm/categoryType/findById/${id}`,
          emulateJSON: true,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            this.baseInfoForm = { ...data }
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
   *{
     box-sizing border-box
   }
</style>
